<template>
  <div id='wrapper' class='root'>
    <home1 v-show="one"></home1>
    <home2 v-show="!one"></home2>
    <!-- <div class='womeng' @click="goPath('wemoooo')">
        <img src='~@/assets/home/womeng.png'>
    </div> -->
    <!-- <div class="show_schedule" @click="get_schedule()">
        <img class="img_icon" src='~@/assets/home/schedule.png'>
    </div>
    <div class="schedule_title" v-show="schedule_show">
      <img class="img_icon" src='~@/assets/home/schedule_title.png'>
    </div>
    <div class="grade_change" v-show="schedule_show">
      <p class="grade_change_text">一年级（下）</p>
    </div>
    <div class="schedule_month" v-show="schedule_show">
      <div class="schedule_month_item" :class="[active_month==3?'schedule_month_active':'']" @click="choose_month(3)"><p class="schedule_month_item_text">三月份</p></div>
      <div class="schedule_month_item" :class="[active_month==4?'schedule_month_active':'']" @click="choose_month(4)"><p class="schedule_month_item_text">四月份</p></div>
      <div class="schedule_month_item" :class="[active_month==5?'schedule_month_active':'']" @click="choose_month(5)"><p class="schedule_month_item_text">五月份</p></div>
      <div class="schedule_month_item" :class="[active_month==6?'schedule_month_active':'']" @click="choose_month(6)"><p class="schedule_month_item_text">六月份</p></div>
    </div>
    <div class="schedule" v-show="schedule_show">
      <div class="weeks_col">
        <div class="weeks_item weeks_margin" :class="[active_week==1?'weeks_activebg':'']" @click="choose_week(1)">
          <p class="weeks_text">第一周</p>
        </div>
        <div class="weeks_item" :class="[active_week==2?'weeks_activebg':'']" @click="choose_week(2)">
          <p class="weeks_text">第二周</p>
        </div>
        <div class="weeks_item" :class="[active_week==3?'weeks_activebg':'']" @click="choose_week(3)">
          <p class="weeks_text">第三周</p>
        </div>
        <div class="weeks_item" :class="[active_week==4?'weeks_activebg':'']" @click="choose_week(4)">
          <p class="weeks_text">第四周</p>
        </div>
      </div>

      <div class="science_col">
        <div class="science_title">
          <p class="title_text">科学实验</p>
        </div>
        <div v-for="(item, index) in item_week_schedule.science" :key="item" class="science_content" :class="[index%2?'margin_content1':'margin_content2']">
          <p class="content_text"><a :href="url + item.link">{{item.name}}</a></p>
        </div>
      </div>
      <div class="robot_col">
        <div class="robot_title">
          <p class="title_text">机器人</p>
        </div>
        <div v-for="(item, index) in item_week_schedule.robot" :key="item" class="robot_content" :class="[index%2?'margin_content1':'margin_content2']">
          <p class="content_text"><a :href="url + item.link">{{item.name}}</a></p>
        </div>
      </div>
      <div class="math_col">
        <div class="math_title">
          <p class="title_text">趣味数学</p>
        </div>
        <div v-for="(item, index) in item_week_schedule.math" :key="item" class="math_content" :class="[index%2?'margin_content1':'margin_content2']">
          <p class="content_text"><a :href="url + item.link">{{item.name}}</a></p>
        </div>
      </div>
      <div class="art_col">
        <div class="art_title">
          <p class="title_text">美术欣赏</p>
        </div>
        <div v-for="(item, index) in item_week_schedule.art" :key="item" class="art_content" :class="[index%2?'margin_content1':'margin_content2']">
          <p class="content_text"><a :href="url + item.link">{{item.name}}</a></p>
        </div>
      </div>
      <div class="ar_col">
        <div class="ar_title">
          <p class="title_text">AR</p>
        </div>
        <div v-for="(item, index) in item_week_schedule.ar" :key="item" class="ar_content" :class="[index%2?'margin_content1':'margin_content2']">
          <p class="content_text"><a :href="url + item.link">{{item.name}}</a></p>
        </div>
        <div class="ar_content">
          <router-link :to="{name: 'video', query: {name: 'landing-page', data: zhiwu, compoent: 'ar-ar1'}}">
            <p class="content_text">松树</p>
          </router-link>
        </div>
      </div>
      <div class="story_col">
        <div class="story_title">
          <p class="title_text">绘本故事</p>
        </div>
        <div v-for="(item, index) in item_week_schedule.story" :key="item" class="story_content" :class="[index%2?'margin_content1':'margin_content2']">
          <p class="content_text"><a :href="url + item.link">{{item.name}}</a></p>
        </div>
      </div>
      <div class="maker_col">
        <div class="maker_title">
          <p class="title_text">创客</p>
        </div>
        <div v-for="(item, index) in item_week_schedule.maker" :key="item" class="maker_content" :class="[index%2?'margin_content1':'margin_content2']">
          <p class="content_text"><a :href="url + item.link">{{item.name}}</a></p>
        </div>
      </div>
      <div class="originality_col">
        <div class="originality_title">
          <p class="title_text">创意美术</p>
        </div>
        <div v-for="(item, index) in item_week_schedule.originality" :key="item" class="originality_content" :class="[index%2?'margin_content1':'margin_content2']">
          <p class="content_text"><a :href="url + item.link">{{item.name}}</a></p>
        </div>
      </div>
    </div> -->

    <div class="left">
      <img @click="change_home('left')" src="~@/assets/images/common/left.png">
    </div>
    <div class="right">
      <img @click="change_home('right')" src="~@/assets/images/common/right.png">
    </div>
    <div class='yinyue' @click="goPath('musicplay')">
        <img class="img_icon" src='~@/assets/home/btn1.png'>
    </div>
    <!-- <div class='kecheng'>
        <img class="img_icon" src='~@/assets/home/btn2.png'>
    </div> -->
    <div class='gushi' @click="goPath('gushiplay')">
        <img class="img_icon" src='~@/assets/home/btn3.png'>
    </div>
    <div class='exitButton' @click='exitFun'>
      <img src='~@/assets/home/exit.png'>
    </div>
    <!-- <div class='active' @click='activeFun'> -->
    <!-- <div class='active'>
      <img :src='activepng'>
    </div> -->
    <div class='loadding' v-if='showLoad'>
      <div class='spinner'>
        <div class='spinner-container container1'>
          <div class='circle1'></div>
          <div class='circle2'></div>
          <div class='circle3'></div>
          <div class='circle4'></div>
        </div>
        <div class='spinner-container container2'>
          <div class='circle1'></div>
          <div class='circle2'></div>
          <div class='circle3'></div>
          <div class='circle4'></div>
        </div>
        <div class='spinner-container container3'>
          <div class='circle1'></div>
          <div class='circle2'></div>
          <div class='circle3'></div>
          <div class='circle4'></div>
        </div>
      </div>
  </div>
  </div>
</template>

<script>
// import VERIFYURL from '../verify'
import STATICPATH from '../config.js'
import home1 from '../components/home/home1'
import home2 from '../components/home/home2'
export default {
  name: 'landing-page',
  data () {
    return {
      url: STATICPATH,
      state: false,
      showLoad: false,
      activepng: 'static/home/off.png',
      key_path: '',
      one: true,
      need_create: true,
      schedule_show: false,
      syllabus: {
        first_grade_up: {
          three_month: {
            first_week: {
              science: {},
              robot: {},
              math: {},
              art: {},
              ar: {},
              story: {},
              maker: {},
              originality: {}
            }
          }
        }
      },
      active_month: 3,
      active_week: 1,
      item_week_schedule: {}
    }
  },
  components: {
    home1,
    home2
  },
  created () {
    let that = this
    if (that.$store.state.homeindex) {
      that.one = true
    } else {
      that.one = false
    }
    // console.log(that.url);
    // console.log('check111111');
    // console.log(this.$store.state.active);
    // if (!this.$store.state.active) {
    //   that.verify('verify_open')
    // }
    that.activepng = 'static/home/on.png'
    // if (!this.$store.state.active) {
    //   that.showLoad = false
    //   that.activepng = 'static/home/on.png'
    // }
    // if (!this.$store.state.active) {
    let childProcessServe = require('child_process')
    // childProcessServe.execFile('cmd', ['taskkill -im dinosaurserve.exe -f '], (error, stdout, stderr) => {
    //   console.log('开始关闭dinosaurserve')
    //   if (error) {
    //     // alert('服务关闭错误')
    //     console.log(error)
    //   }
    //   console.log(stdout)
    // })
    if (!this.$store.state.active) {
      childProcessServe.execFile(
        'bin/dinosaurserve.exe',
        ['--logging=error'],
        (error, stdout, stderr) => {
          console.log('开始启动dinosaurserve')
          if (error) {
            alert('服务启动错误')
            console.log(error)
          }
          console.log(stderr)
          console.log(stdout)
        }
      )
      this.$store.commit('success')
    }
    let readtxt = require('child_process')
    let Base64 = require('js-base64').Base64
    readtxt.exec(
      'type pwd.bat',
      { cwd: 'bin/' },
      (readPwdErr, readPwdStdout, readPwdStderr) => {
        if (readPwdErr) {
          alert('缺失校验文件！')
        } else {
          readtxt.exec(
            'type system_old.bat',
            { cwd: 'C:/Windows/system/' },
            (readOldErr, readOldStdout, readOldStderr) => {
              var list = ''
              var pwd = ''
              if (readOldErr) {
                console.log('system_old文件不存在！')
                readtxt.exec(
                  'cd.>system_old.bat',
                  { cwd: 'C:/Windows/system/' },
                  (createOldErr, createOldStdout, createOldStderr) => {
                    // 创建文件，保存当前密钥
                  }
                )
              }
              readtxt.exec(
                'type system_list.bat',
                { cwd: 'C:/Windows/system/' },
                (readListErr, readListStdout, readListStderr) => {
                  if (readListErr) {
                    console.log('list文件不存在！')
                    readtxt.exec(
                      'cd.>system_list.bat',
                      { cwd: 'C:/Windows/system/' },
                      (createListErr, createListStdout, createListStderr) => {
                        // 创建文件，保存所有密钥
                      }
                    )
                  }
                  list = readListStdout
                  // console.log(Number(readPwdStdout))
                  // console.log(Number(readOldStdout))
                  // console.log(list)
                  pwd = readPwdStdout
                  // var readPwdStdout10 = Base64.decode(readPwdStdout)
                  // var readOldStdout10 = Base64.decode(readOldStdout)
                  // var test = 222
                  for (var i = 1; i <= 10; i++) {
                    readPwdStdout = Base64.decode(readPwdStdout)
                    readOldStdout = Base64.decode(readOldStdout)
                    // test = Base64.encode(test)
                    // console.log(i)
                    // console.log(readPwdStdout)
                    // console.log(readOldStdout)
                  }
                  // console.log('-----------')
                  // console.log(test)
                  // console.log('------------')
                  if (
                    (Number(readPwdStdout) === Number(readOldStdout) && readPwdStdout !== '') ||
                    (Number(readPwdStdout) > 0 &&
                      Number(readPwdStdout) <= 299 &&
                      Number(readPwdStdout) !== Number(readOldStdout) &&
                      list.indexOf(pwd) < 0)
                  ) {
                    // 程序初次启动或者校验文件无变化或校验文件正确
                    console.log('校验文件无变化或校验文件正确')
                    if (
                      Number(readPwdStdout) >= 0 &&
                      Number(readPwdStdout) <= 99
                    ) {
                      this.$store.commit('up')
                    } else if (
                      Number(readPwdStdout) >= 100 &&
                      Number(readPwdStdout) <= 199
                    ) {
                      this.$store.commit('down')
                    } else if (
                      Number(readPwdStdout) >= 200 &&
                      Number(readPwdStdout) <= 299
                    ) {
                      this.$store.commit('all')
                    }
                    if (
                      Number(readPwdStdout) !== Number(readOldStdout) &&
                      Number(readPwdStdout) > 0 &&
                      Number(readPwdStdout) <= 299
                    ) {
                      console.log('验证码为新且符合规则')
                      readtxt.exec(
                        'echo ' + pwd + ' > system_old.bat',
                        { cwd: 'C:/Windows/system/' },
                        (echoOldErr, echoOldStdout, echoOldStderr) => {
                          console.log('保存新的验证码')
                        }
                      )
                      readtxt.exec(
                        'echo ' + pwd + ' >> system_list.bat',
                        { cwd: 'C:/Windows/system/' },
                        (echoListErr, echoListStdout, echoListStderr) => {
                          console.log('保存新的验证码')
                        }
                      )
                    }
                  } else {
                    // 检验文件失效则通过旧的校验文件判断权限
                    if (list.indexOf(pwd) >= 0 && readOldStdout !== '') {
                      console.log('校验文件已失效')
                      if (
                        readOldStdout !== '' &&
                        Number(readOldStdout) > 0 &&
                        Number(readOldStdout) <= 99
                      ) {
                        this.$store.commit('up')
                      } else if (
                        Number(readOldStdout) >= 100 &&
                        Number(readOldStdout) <= 199
                      ) {
                        this.$store.commit('down')
                      } else if (
                        Number(readOldStdout) >= 200 &&
                        Number(readOldStdout) <= 299
                      ) {
                        this.$store.commit('all')
                      }
                    } else {
                      alert('检验文件无效')
                    }
                  }
                }
              )
            }
          )
        }
      }
    )
  },
  methods: {
    create_newwindow: function () {
      var links = document.querySelectorAll('a')
      // console.log(links)
      Array.prototype.forEach.call(links, function (links) {
        links.addEventListener('click', function (evt) {
          evt.preventDefault()
          // console.log(this)
          // console.log(this.href)
          if (this.href.slice(0, 16) === 'http://127.0.0.1') {
            // console.log(this.href)
            const BrowserWindow = require('electron').remote.BrowserWindow
            BrowserWindow.showDevTools = false
            let win = new BrowserWindow({
              width: 1280,
              height: 720,
              webPreferences: {
                nodeIntegration: false
              },
              show: false,
              backgroundColor: '#2e2c29'
            })
            win.setFullScreen(true)
            win.loadURL(this.href)
            win.once('ready-to-show', () => {
              win.show()
            })
          } else {
            window.location.href = this.href
          }
        })
      })
    },
    get_schedule: function () {
      let that = this
      if (that.need_create) {
        that.create_newwindow()
        that.need_create = false
      }
      that.schedule_show = !that.schedule_show
    },
    choose_month: function (index) {
      let that = this
      if (index !== that.active_month) {
        that.active_month = index
        that.active_week = 1
        if (index === 3) {
          that.item_week_schedule = that.syllabus.first_grade_up.three_month.first_week
        }
        if (index === 4) {
          that.item_week_schedule = that.syllabus.first_grade_up.fourth_month.first_week
        }
        if (index === 5) {
          that.item_week_schedule = that.syllabus.first_grade_up.fifth_month.first_week
        }
        if (index === 6) {
          that.item_week_schedule = that.syllabus.first_grade_up.sixth_month.first_week
        }
        that.$nextTick(() => that.create_newwindow())
      }
    },
    choose_week: function (index) {
      let that = this
      if (index !== that.active_week) {
        that.active_week = index
        if (that.active_month === 3) {
          if (index === 1) {
            that.item_week_schedule = that.syllabus.first_grade_up.three_month.first_week
          }
          if (index === 2) {
            that.item_week_schedule = that.syllabus.first_grade_up.three_month.second_week
          }
          if (index === 3) {
            that.item_week_schedule = that.syllabus.first_grade_up.three_month.third_week
          }
          if (index === 4) {
            that.item_week_schedule = that.syllabus.first_grade_up.three_month.fourth_week
          }
        }
        if (that.active_month === 4) {
          if (index === 1) {
            that.item_week_schedule = that.syllabus.first_grade_up.fourth_month.first_week
          }
          if (index === 2) {
            that.item_week_schedule = that.syllabus.first_grade_up.fourth_month.second_week
          }
          if (index === 3) {
            that.item_week_schedule = that.syllabus.first_grade_up.fourth_month.third_week
          }
          if (index === 4) {
            that.item_week_schedule = that.syllabus.first_grade_up.fourth_month.fourth_week
          }
        }
        if (that.active_month === 5) {
          if (index === 1) {
            that.item_week_schedule = that.syllabus.first_grade_up.fifth_month.first_week
          }
          if (index === 2) {
            that.item_week_schedule = that.syllabus.first_grade_up.fifth_month.second_week
          }
          if (index === 3) {
            that.item_week_schedule = that.syllabus.first_grade_up.fifth_month.third_week
          }
          if (index === 4) {
            that.item_week_schedule = that.syllabus.first_grade_up.fifth_month.fourth_week
          }
        }
        if (that.active_month === 6) {
          if (index === 1) {
            that.item_week_schedule = that.syllabus.first_grade_up.sixth_month.first_week
          }
          if (index === 2) {
            that.item_week_schedule = that.syllabus.first_grade_up.sixth_month.second_week
          }
          if (index === 3) {
            that.item_week_schedule = that.syllabus.first_grade_up.sixth_month.third_week
          }
          if (index === 4) {
            that.item_week_schedule = that.syllabus.first_grade_up.sixth_month.fourth_week
          }
        }
        that.$nextTick(() => that.create_newwindow())
      }
    },
    goPath: function (namePath) {
      // console.log('check')
      if (this.$store.state.active) {
        this.$router.push({ name: namePath })
      } else {
        alert('授权失败')
      }
    },
    change_home (flag) {
      this.one = !this.one
      this.$store.commit('change_homeindex')
    },
    exitFun: function () {
      let childProcessServeClose = require('child_process')
      childProcessServeClose.execFile(
        'cmd',
        ['taskkill -im dinosaurserve.exe -f '],
        (error, stdout, stderr) => {
          console.log('开始关闭dinosaurserve')
          if (error) {
            // alert('服务关闭错误')
            console.log(error)
          }
          console.log(stdout)
        }
      )
      const remote = require('electron').remote
      var win = remote.getCurrentWindow()
      win.close()
    }
    // activeFun: function() {
    //   if (this.$store.state.active === 0) {
    //     this.getKeyPath();
    //     if (!this.key_path) {
    //       alert('key 路径错误');
    //       return;
    //     }
    //     this.verify('verify_key');
    //   } else {
    //     if (confirm('您已激活，是否重新激活?')) {
    //       this.getKeyPath();
    //       if (!this.key_path) {
    //         alert('key 路径错误');
    //         return;
    //       }
    //       this.verify('verify_key');
    //     } else {
    //       console.log('cancel');
    //     }
    //   }
    // },
    // getKeyPath: function() {
    //   const { dialog } = require('electron').remote
    //   this.key_path = dialog.showOpenDialog({
    //     properties: ['openFile']
    //   })[0]
    // },
    // verify: function(verifyType) {
    //   console.log('start verify')
    //   let childProcess = require('child_process');
    //   console.log(verifyType)
    //   console.log(VERIFYURL)
    //   console.log(this.key_path)
    //   if (verifyType === 'verify_key') {
    //     if (this.key_path.length < 3) {
    //       alert('key文件路径错误')
    //       return;
    //     }
    //   }
    //   this.showLoad = true;
    //   childProcess.execFile(
    //     'bin/dinosaur.exe',
    //     [verifyType, VERIFYURL, this.key_path],
    //     (error, stdout, stderr) => {
    //       if (error) {
    //         alert('key校验错误')
    //         console.log(error)
    //       }
    //       console.log(stdout)
    //       if (stdout.trim() === 'ok') {
    //         if (verifyType === 'verify_key') {
    //           alert('key校验成功')
    //         }
    //         console.log('success')
    //         this.$store.commit('success')
    //         this.activepng = 'static/home/on.png'
    //       } else {
    //         if (verifyType === 'verify_key') {
    //           alert('key校验失败')
    //         }
    //         console.log('failed...')
    //         this.$store.commit('failed')
    //         this.activepng = 'static/home/off.png'
    //       }
    //       this.showLoad = false
    //     }
    //   )
    // }
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
  user-select: none;
}
.root > div {
  position: absolute;
}
.img_icon {
  height: 100%;
  width: 100%;
}
.left {
  z-index: 10;
  top: 330px;
  left: 50px;
}
.right {
  z-index: 10;
  top: 330px;
  left: 1200px;
}
.yinyue {
  left: 988px;
  /* top: 605px; */
  bottom: 10px;
  width: 100px;
  height: 83px;
}
/* .kecheng {
  left: 535px;
  top: 586px;
  width: 200px;
  height: 80px;
} */
.gushi {
  left: 1100px;
  top: 498px;
  width: 100px;
  height: 100px;
}
.exitButton {
  right: 10px;
  top: 10px;
}
.loadding {
  height: 100%;
  width: 100%;
  background-color: #000000;
  opacity: 0.6;
}

.spinner {
  top: 25%;
  margin: 100px auto;
  width: 80px;
  height: 80px;
  position: relative;
}
.grade_change {
  left: 59%;
  top: 120px;
}
.grade_change_text {
  font-size: 20px;
}
.show_schedule {
  left: 88px;
  top: 86px;
  width: 100px;
  height: 83px;
}
.schedule_title {
  width: 200px;
  height: 60px;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 100px;
}
.schedule_month {
  width: 920px;
  height: 30px;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 200px;
}
.schedule_month_item {
  float: left;
  width: 100px;
  height: 30px;
  text-align: center;
  background-color: rgb(222, 222, 222);
  color: white;
  margin-left: 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.schedule_month_active {
  background-color: rgb(238, 129, 2);
}
.schedule_month_item_text {
  line-height: 30px;
  margin-top: 0;
  margin-bottom: 0;
}
.schedule {
  width: 920px;
  height: 400px;
  background-color: white;
  border-radius: 15px;
  overflow: hidden;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 230px;
}
.schedule a {
  text-decoration: none;
}
.weeks_col,.science_col,.robot_col,.math_col,.art_col,.ar_col,.story_col,.maker_col,.originality_col {
  width: 11.1%;
  height: 100%;
  float: left;
  text-align: center;
}
.weeks_item {
  background: rgb(222,222,222);
  color: white;
  height: 86px;
  border-bottom: 1px solid white;
}
.weeks_activebg {
  background: rgb(0, 142, 144);
}
.weeks_margin {
  margin-top: 52px;
}
.weeks_text {
  line-height: 86px;
  margin-top: 0;
  margin-bottom: 0;
}
.science_title {
  height: 52px;
  background: rgb(240,200,23);
}
.robot_title {
  height: 52px;
  background: rgb(194, 106, 8);
}
.math_title {
  height: 52px;
  background: rgb(143, 195, 32);
}
.art_title {
  height: 52px;
  background: rgb(2, 155, 197);
}
.ar_title {
  height: 52px;
  background: rgb(153, 107, 171);
}
.story_title {
  height: 52px;
  background: rgb(4, 144, 141);
}
.maker_title {
  height: 52px;
  background: rgb(245, 98, 140);
}
.originality_title {
  height: 52px;
  background: rgb(238, 129, 0);
}
.title_text {
  line-height: 52px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
}
.science_content,.robot_content,.math_content,.art_content,.ar_content,.story_content,.maker_content,.originality_content {
  overflow: hidden;
  height: 42px;
}
.science_content {
  background: rgb(254, 235, 169);
}
.robot_content {
  background: rgb(238, 136, 34);
}
.math_content {
  background: rgb(203, 225, 153);
}
.art_content {
  background: rgb(165, 214, 229);
}
.ar_content {
  background: rgb(199, 139, 223);
}
.story_content {
  background: rgb(133, 196, 201);
}
.maker_content {
  background: rgb(241, 122, 156);
}
.originality_content {
  background: rgb(240, 158, 57);
}
.margin_content1 {
  border-bottom: 1px solid white;
}
.margin_content2 {
  border-bottom: 2px solid white;
}
.content_text {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 42px;
  font-size: 16px;
}
.content_text a {
  text-decoration: none;
  color: black;
}
.container1 > div,
.container2 > div,
.container3 > div {
  width: 24px;
  height: 24px;
  background-color: red;

  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

.circle1 {
  top: 0;
  left: 0;
}
.circle2 {
  top: 0;
  right: 0;
}
.circle3 {
  right: 0;
  bottom: 0;
}
.circle4 {
  left: 0;
  bottom: 0;
}

.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.container3 .circle1 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes bouncedelay {
  0%,
  80%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  40% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

.active {
  top: 630px;
  left: 1220px;
}
</style>
